<template>
  <section class="demo" ref="pageMain">
    <!--头部页面标题-->
    <el-row class="c-header">
      <strong class="c-title">{{$route.meta.title}}</strong>
    </el-row>
    <!--头部工具条-->
    <el-row class="c-toolbar">
      <el-col :span="12">
        <el-button type="primary" @click.native="addData">新增</el-button>
      </el-col>
      <el-col :span="12" class="c-query-box">
        <el-input v-model="keyword" placeholder="查询条件"></el-input>
        <el-button type="primary" @click.native="queryPageList">查询</el-button>
      </el-col>
    </el-row>
    <!--查询列表-->
    <el-table class="c-table-list" highlight-current-row :data="dataList" @select="handleSelect" @selection-change="handleSelectionChange" @current-change="handleTableCurrentChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="connName" label="连接名"></el-table-column>
      <el-table-column prop="connHost" label="地址"></el-table-column>
      <el-table-column prop="connPort" label="端口"></el-table-column>
      <el-table-column prop="connSchema" label="连接库名称"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click.native="editData(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click.native="deleteData(scope.row, queryPageList)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页工具条-->
    <el-row>
      <el-col :span="24" class="c-pagination-box">
        <el-button type="danger" :disabled="this.selectedItems.length === 0" @click.native="deleteBatchData(queryPageList)">批量删除</el-button>
        <el-pagination class="c-pagination" layout="total, prev, pager, next" :page-size="10" :total="pageTotal" @current-change="handlePageCurrentChange($event, queryPageList)"></el-pagination>
      </el-col>
    </el-row>
    <!--新增/编辑界面-->
    <el-dialog :title="dialogMode === 'ADD' ? '新增':'编辑'" width="700px" :visible.sync="isDialogOpen" :close-on-click-modal="false">
      <el-form ref="dialogForm" label-width="100px" :model="dialogForm" :rules="rules">
        <el-form-item label="用户名" prop="connUsername">
          <el-input v-model="dialogForm.connUsername"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="connPassword">
          <el-input v-model="dialogForm.connPassword"></el-input>
        </el-form-item>
        <el-form-item label="数据库类型" prop="dbType">
        <el-input v-model="dialogForm.dbType"></el-input>
        </el-form-item>
        <el-form-item label="数据库驱动" prop="dbDriver">
          <el-input v-model="dialogForm.dbDriver"></el-input>
        </el-form-item>
        <el-form-item label="连接名称" prop="connName">
          <el-input v-model="dialogForm.connName"></el-input>
        </el-form-item>
        <el-form-item label="连接主机号" prop="connHost">
          <el-input v-model="dialogForm.connHost"></el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="connPort">
          <el-input v-model="dialogForm.connPort"></el-input>
        </el-form-item>
        <el-form-item label="连接方式" prop="connSchema">
          <el-input v-model="dialogForm.connSchema"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="footer-button">
        <el-button @click.native="closeDialog">取消</el-button>
        <el-button type="primary" @click.native="submitFormData('dialogForm', queryPageList)">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { mixins } from '@assets/common/js/mixins'
import valid from '@assets/common/js/utils/rules'
import api from './cgp'
export default {
  name: 'CgpConnection',
  mixins: [ mixins ],
  data () {
    return {
      keyword: '',
      currentId: '',
      dataList: [],
      selectedItems: [],
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { max: 32, message: '最大长度不能超过32字符', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 20, message: '最大长度不能超过20字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: valid.mobileValidator, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 显示新增界面
    addData () {
      this.commonAddData('dialogForm')
    },
    // 删除
    deleteData (data, func) {
      this.commonDeleteData(api.DELETE_CGP_CONNECTION + '/' + data.id, {
        success: func
      })
    },
    // 批量删除
    deleteBatchData (func) {
      let ids = this.selectedItems.map(item => item.id)
      this.commonDeleteData(api.DELETE_CGP_BATCH_CONNECTION, {
        isBatchDel: true,
        paramsType: 'array',
        params: ids,
        isUrlParams: false,
        success: func
      })
    },
    // 显示编辑界面
    editData (data) {
      this.commonEditData({
        formName: 'dialogForm',
        params: data
      })
    },
    // 提交新增/编辑表单数据
    submitFormData (formName, func) {
      let apiUrl = api.INSERT_CGP_CONNECTION
      let method = 'post'
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = { ...this.dialogForm }
          let info = this.dialogMode === 'ADD' ? '添加成功' : '修改成功'
          if (this.dialogMode === 'EDIT') {
            params.id = this.dialogForm.id
            apiUrl = api.UPDATE_CGP_CONNECTION
            method = 'put'
          }
          this.commonSubmitData(apiUrl, {
            method,
            info,
            params,
            success: func
          })
        }
      })
    },
    // 获取列表
    queryPageList () {
      let params = {
        keyword: this.keyword
      }
      this.commonQueryPageList(api.SELECT_CGP_CONNECTION_PAGE_LIST, {
        method: 'get',
        params: params,
        success: (data) => {
          this.dataList = data.dataList
        }
      })
    },
    // 获取当前选择的数据
    handleSelect (selection, row) {
      selection.length > 0 ? this.currentId = selection[0].id : this.currentId = ''
    },
    // 选中当前行
    handleTableCurrentChange (currentRow, oldCurrentRow) {
      if (currentRow) {
        this.currentId = currentRow.id
      }
    },
    // 多选
    handleSelectionChange (selection) {
      this.selectedItems = selection
    }
  },
  mounted () {
    this.queryPageList()
  }
}
</script>
<style>
@charset "utf-8";
.p-table-list-left {
  width: 100%;
  margin: 10px 10px 0px 0px;
}
.p-table-list-right {
  width: 100%;
  margin: 10px 0px 0px 0px;
}
.p-col-span {
  color: #fff;
}
.footer-button {
  text-align: center;
}
</style>
